<template>
  <div class="task-container">
    <!-- 查询表单 -->
    <el-card class="register-info">
      <div class="info-box">
        <img :src="infoType.avatar ? infoType.avatar : headerImg" class="avatar" />

        <div class="user-info-container">
          <!-- 信息项 -->
          <div v-for="(infoType, index) in userInfo" :key="index" class="info-item">
            <div class="label">{{ infoType.label }}：</div>
            <div class="value-container">
              <span
                class="value"
                :class="{ verified: infoType.label === '实名认证' && infoType.value === '已认证' }"
              >
                {{ infoType.value }}
              </span>
              <span v-if="infoType.action" class="action-text" @click="editPhone">
                {{ infoType.action }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 任务列表 -->
    <el-card class="account-list">
      <div class="tab-bar">
        <div
          v-for="tab in tabs"
          :key="tab.id"
          class="tab"
          :class="{ active: activeTab === tab.id }"
          @click="switchTab(tab.id)"
        >
          {{ tab.label }}
        </div>
      </div>
      <!-- 第一个选项卡内容 -->
      <div v-show="activeTab === 'current'" class="tab-content">
        <CurrentInfo ref="editStatusRef" />
      </div>
      <div v-show="activeTab === 'other'" class="tab-content">
        <OtherInfo />
      </div>
      <div v-show="activeTab === 'records'" class="tab-content">
        <RecordsInfo />
      </div>
    </el-card>
    <EditPhone ref="editPhoneRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import headerImg from "@/assets/register/default_avator.png";
import CurrentInfo from "./components/CurrentInfo.vue";
import OtherInfo from "./components/OtherInfo.vue";
import RecordsInfo from "./components/RecordsInfo.vue";
import EditPhone from "./components/EditPhone.vue";

//tab
type TabID = "current" | "other" | "records";
interface Tab {
  id: TabID;
  label: string;
}

const tabs: Tab[] = [
  { id: "current", label: "当前信息" },
  { id: "other", label: "其他信息" },
  { id: "records", label: "信息记录" },
];

const activeTab = ref<TabID>("current");

const switchTab = (tabId: TabID) => {
  activeTab.value = tabId;
};
//用户信息
const infoType = ref({});
const userInfo = [
  { label: "用户名", value: "王力群" },
  { label: "实名认证", value: "已认证" },
  { label: "账号ID", value: "0801022056" },
  { label: "手机号码", value: "13818877798", action: "修改" },
  { label: "注册时间", value: "2021/09/09" },
];
//修改手机号
const editPhoneRef = ref<InstanceType<typeof EditPhone>>();
const editPhone = () => {
  editPhoneRef.value?.openDialog();
};
//修改属性
const editStatusRef = ref<InstanceType<typeof EditStatus>>();
const EditStatus = () => {
  editStatusRef.value?.openDialog();
};
</script>

<style lang="scss" scoped>
.task-container {
  padding: 25px;
  background: #ffffff;
  height: 100vh;
  .register-info {
    margin-bottom: 25px;
    border-radius: 30px 30px 30px 30px;
    background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
    box-shadow:
      inset 2px 1px 2px 1px #ffffff,
      0px 4px 8px 0px #eaf0ff;
    border: none;
    display: flex;
    align-items: center;
    padding: 20px 40px;
    // height: 150px;
    .info-box {
      display: flex;
      align-content: center;
      // margin-bottom: 34px;
    }
    .avatar {
      // display: flex;
      // align-items: center;
      margin-top: 30px;
      height: 100px;
      width: 100px;
    }
    .user-info-container {
      max-width: 600px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      // background-color: #3c80ff;
      gap: 0 170px;
      // width: 100%;
      justify-items: center;

      .info-item {
        width: 25%;
        display: flex;
        // padding: 10px;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: 400;
        gap: 10px;
        .value {
          &.verified {
            color: #00b578;
          }
        }
        // background-color: #3c80ff;
        .label {
          flex-shrink: 0;
          width: 100px;
          text-align: right;
          white-space: nowrap;
          padding: 6px;
          border-radius: 4px;
          font-weight: 500;
          // background-color: lightgoldenrodyellow;
        }

        .value-container {
          flex: 1;
          width: 160px;
          padding: 6px;
          border-radius: 4px;
          white-space: nowrap;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap: 2px;
          // background-color: lightblue;

          // .value {
          //   color: #303133;
          //   font-size: 14px;
          // }

          .action-text {
            color: #3c80ff;
            font-size: 14px;
            margin-left: 8px;

            cursor: default;
            // cursor: pointer;
            // transition: opacity 0.2s;

            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .account-list {
    border-radius: 30px 30px 30px 30px;
    height: calc(100vh - 400px); // 动态计算高度
    overflow: auto; // 添加滚动条
    // min-height: 1020px;
    background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
    box-shadow:
      inset 2px 1px 2px 1px #ffffff,
      0px 4px 8px 0px #eaf0ff;
    border: none;
  }
  //tab
  .tab-bar {
    display: flex;
    margin: 20px 0;

    .tab {
      margin-left: 20px;
      padding: 12px 24px;
      min-width: 118px;
      min-height: 46px;
      cursor: pointer;
      color: #86909c;
      font-size: 16px;
      background: url("@/assets/dashboard/tabBg.png") center no-repeat;
      background-size: cover;

      &.active {
        color: #3c80ff;
        // background-image: url("@/assets/dashboard/tabActiveBg.png");
      }
    }
  }

  .tab-item.active {
    // color: #409eff;
    // border-bottom: 2px solid #409eff;
  }

  .tab-content {
    padding: 20px 0;
    margin: auto 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 0;
    width: 100%;
    margin-left: auto;
    .info-row {
      width: 25%;
      display: flex;
      padding: 0 8px;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 400;
      .label {
        flex-shrink: 0;
        width: 100px;
        text-align: right;
        white-space: nowrap;
        padding: 6px;
        border-radius: 4px;
        font-weight: 500;
        color: #4e5969;
        // background-color: #3c80ff;
      }
      .value {
        flex: 1;
        width: 120px;
        border-radius: 4px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 2px;
        // background-color: olive;
      }
    }
  }

  .info-section {
    display: flex;
    gap: 60px;
    margin-bottom: 30px;
  }

  .info-column {
    flex: 1;
  }

  .info-item {
    margin: 15px 0;
    display: flex;
    align-items: center;
  }

  .edit-link {
    color: #409eff;
    text-decoration: none;
    margin-left: 15px;
    font-size: 13px;
  }

  .additional-info {
    border-top: 1px solid #eee;
    padding-top: 20px;
  }
}
</style>
